<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title mb20">常用链接</h2>
      <!-- <button class="text-primary text-sm hover:underline" @click="manageLinks">管理</button> -->
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-8">
      <div v-for="(link, index) in usefulLinks" v-if="index < 2" :key="index" @click.prevent="openLink(link.url)"
        class="module-container relative" :class="'gradient-' + link.theme">
        <div v-if="link.tip" class="absolute top-0 right-0 -mt-4 -mr-4 p-2 rounded-full shadow-md tips">
          <span class="text-xs">{{ link.tip }}</span>
        </div>
        <img v-if="link.img" :src="link.img" class="module-icon" alt="">
        <svg-icon v-else class="module-icon" :style="{ 'font-size': '75px', 'color': link.theme, 'opacity': '0.5' }"
          :icon-class="link.iconClass" />

        <h3 class="font-bold text-xl mb-3 " :class="'text-' + link.theme + '-700'">{{ link.name }}</h3>
        <p :class="'text-' + link.theme + '-700/80'"></p>
      </div>
    </div>

    <div class="p-4">
      <div class="grid grid-cols-2 gap-3">
        <a href="#"
          class="flex items-center p-3 border border-gray-100 rounded-lg hover:border-primary/30 hover:bg-primary/5 transition-colors"
          v-for="(link, index) in usefulLinks" v-if="index > 1" :key="index" @click.prevent="openLink(link.url)">
          <div class="w-8 h-8 rounded bg-gray-100 flex items-center justify-center text-gray-600 mr-3">
            <svg-icon :icon-class="link.iconClass" />
          </div>
          <div class="text-sm">{{ link.name }}</div>
        </a>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters([
      "sidebarRouters",
    ])
  },

  data() {
    return {
      usefulLinks: [{name: '用户扫码页面', iconClass: 'chart', url: '/app', theme: 'orange'}],
    };
  },
  created() {
    // console.log("sidebarRouters:", this.sidebarRouters);
    for (let index = 0; index < this.sidebarRouters.length; index++) {
      const route = this.sidebarRouters[index];
      if (!route.hidden && route.children && !route.children[0].hidden && route.path == '/') {
        // console.log("route:", route);
        // 将符合条件的路由添加到 usefulLinks 数组中
        this.usefulLinks.push({
          name: route.children[0].meta.title,
          iconClass: route.children[0].meta.icon, // 默认图标，可根据需要调整
          url: route.path + route.children[0].path,
          // 为前两个链接添加主题
        });
        console.log(index)
        if (this.usefulLinks.length == 1) {
          this.usefulLinks[0].theme = 'orange';
        } else if (this.usefulLinks.length == 2) {
          this.usefulLinks[1].theme = 'blue';
        } else {
        }
      }
    }
    // console.log("usefulLinks:", this.usefulLinks);

    this.getInfo()
  },
  methods: {
    getInfo() {

    }, manageLinks() {
      // 管理常用链接逻辑
      console.log('管理常用链接');
    },
    openLink(url) {
      // 打开链接逻辑
      console.log('打开链接:', url);
      // 实际应用中可使用 window.open 或路由跳转
      this.$router.push(url)
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.hover\:border-primary\/30:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.hover\:bg-primary\/5:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.transition-colors {
  transition: all 0.2s ease;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}

.text-gray-600 {
  color: #4b5563;
}

.text-primary {
  color: #3b82f6;
}

.hover\:underline:hover {
  text-decoration: underline;
}

/* 渐变背景 */
.gradient-orange {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
}

/* 模块容器样式 */
.module-container {
  position: relative;
  padding: 30px 20px 20px;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 140px;
}

.module-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  z-index: 0;
  transition: transform 0.3s ease;
  opacity: 0.9;
}

/* 文字颜色 */
.text-orange-700 {
  color: #FB923C;
}

.text-orange-700\/80 {
  color: rgba(251, 146, 60, 0.8);
}

.text-orange-900 {
  color: #EA580C;
}

.text-blue-700 {
  color: #3B82F6;
}

.text-blue-700\/80 {
  color: rgba(59, 130, 246, 0.8);
}

.text-blue-900 {
  color: #1D4ED8;
}

.text-green-700 {
  color: #10B981;
}

.text-green-700\/80 {
  color: rgba(16, 185, 129, 0.8);
}

.text-green-900 {
  color: #059669;
}

/* 悬停效果 - 修改为整体放大3px并加深阴影 */
.module-container:hover {
  transform: scale(1.01);
  /* 整体放大3% */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  /* 阴影加深 */
}

.module-container:hover .module-icon {
  transform: scale(1.1) rotate(25deg);
  opacity: 1;
}

.tips {
  background: #f56c6c;
  color: #fff;
  line-height: 13px;
}
</style>